<template>
  <div class="info-container content">
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item>
        <router-link :to="{path:'/'}">首页</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item :key="this.$route.params.id">
        <router-link :to="{path:`/detail/${this.$route.params.id}`}">{{ this.currentMenu }}</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item :key="this.$router.history.current.path">
        <router-link :to="this.$router.history.current.path">{{ article.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix title">
        <span>{{article.title}}</span>
      </div>
      <div v-html="article.content">
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
    name: 'DetailContent',
    components: {
    },
    data() {
        return {
            article: '',
            currentMenu: ''
        }
    },
    methods: {
        getArticleData: function() {
            this.$api.index.getArticle(this.$route.params.id).then(response => {
                this.article = response.data
            })
        },
        getActiveMenu: function() {
            // 监听异步路由加载完成后，自动打开当前路由
            const cd = setInterval(() => {
                if (document.querySelector('li.el-menu-item.is-active').innerHTML) {
                    cd && clearInterval(cd)
                    this.currentMenu = document.querySelector('li.el-menu-item.is-active').innerHTML
                }
            }, 100)
        }
    },
    mounted() {
        this.getActiveMenu()
        this.getArticleData()
    }
}
</script>

<style scoped>
  .info-container{
    background-color: #fafafa;
    min-height: calc(100vh - 249px);
  }
  .box-card{
    min-height: calc(100vh - 249px);
    text-align: left;
  }
  .title{text-align: center;}
  .breadcrumb {
    padding: 10px;
  }
</style>
